/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Radio,
  TreeSelect,
  Select,
  Collapse,
  Button,
  message,
  Card,
  Result,
  Row,
  Col,
  Steps,
  Typography
} from 'antd';
import {connect} from 'dva';
import './index.less'
import request from '@/utils/request';
import {printUtils} from '@/utils/utils';
const { Paragraph } = Typography;
const FormItem = Form.Item;
const { Step } = Steps;
const Option = Select.Option;

@connect(({ owner}) => ({
  owner,
}))
@Form.create()
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 16},
      }
    };
    this.formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 6},
        sm: {span: 10},
      },
      wrapperCol: {
        xs: {span: 18},
        sm: {span: 13},
      }
    };
    this.state = {
      current:0,
      amount:0,
      remark:'',
      type:1,
      payId:'',
      reuse:'1',
      payObj:{}
    };
  }
  componentDidMount() {
    console.log(this.props)
    this.setState({
      balance:this.props.editRecord.balance
    })
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  changeMeter=()=>{
    const that=this;
    const {getFieldValue}=this.props.form
    request(`/accounts/${this.props.editRecord.id}/replace`,{
      method:'POST',
      data:{
        meter_number:this.state.meter_number,
        balance:this.state.balance,
        reuse:this.state.reuse,
        remark:this.state.remark,
      }
    }).then((response)=>{
      if(response.status===200){
        this.next();
        const {
          owner: { searchParams },
        } = that.props;
        that.props.handleSearch(searchParams);
      }

    });
  }
  print=()=>{

    console.log(this.state.payId)
    request(`/print/payments/${this.state.payId}`,{
      method:'POST',
    }).then((response)=>{
      if(response.status===200){
        printUtils(response.data.data);
      }

    });
  }
  renderInfo=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    return    <Form onSubmit={this.handleSubmit}>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.name}>{this.props.editRecord.name}</span>
        </Paragraph>

      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.mobile}

      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.address}>{this.props.editRecord.address}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.meter_number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.name}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'三阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_three_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'污水处理费'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.sewage_fee}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        <span
          style={{padding:'5px'}}
          className={Number(this.props.editRecord.balance) > Number(this.props.editRecord.balance_alarm_amount) ? 'table-success table-status' :
            Number(this.props.editRecord.balance) > 0?'table-warm table-status':'table-error table-status'}>{this.props.editRecord.balance}</span>
      </FormItem>

      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="新水表号">
        {getFieldDecorator('amount', {
          initialValue: this.state.meter_number,
          rules: [
            { required: true, message: '请输入新水表号' },
          ],
        })(<Input    AUTOCOMPLETE="off" style={{width:'200px'}} onChange={(e)=>{
          this.setState({
            meter_number:e.target.value
          })
        }}  placeholder="请输入新水表号" />)}
      </Form.Item>
      <FormItem
        label={'转移到新表余额'}
        {...this.formItemLayoutWithLabel2}
      >
        {getFieldDecorator('balance', {
          initialValue: this.state.balance,
          rules: [
            { required: true, message: '请输入转移到新表余额' },
          ],
        })(
          <Input    AUTOCOMPLETE="off" style={{width:'200px'}} onChange={(e)=>{
            this.setState({
              balance:e.target.value
            })
          }}  placeholder="请输入新表余额" />
        )}
      </FormItem>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="此水表报废不再使用">
        {getFieldDecorator('reuse', {
          initialValue: this.state.reuse,
          rules: [
            { required: true, message: '请选择' },
          ],
        })(<Select  onChange={(e)=>{
          this.setState({
            reuse:e
          })
        }} allowClear={false} style={{width:'200px'}} >
          <Option value={'1'}>否，重新使用</Option>
          <Option value={'-1'}>是，不重新使用</Option>
        </Select>)}
      </Form.Item>
      <FormItem
        label={'备注'}
        {...this.formItemLayoutWithLabel2}
      >
        {getFieldDecorator('remark', {
          initialValue: this.state.remark,
        })(
          <Input    AUTOCOMPLETE="off" style={{width:'200px'}} onChange={(e)=>{
            this.setState({
              remark:e.target.value
            })
          }}  />
        )}
      </FormItem>
    </Form>
  }

  renderInfo2=()=>{
    const { getFieldDecorator, validateFields } = this.props.form;
    return    <Form onSubmit={this.handleSubmit}>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主姓名'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          <span title={this.props.editRecord.name}>{this.props.editRecord.name}</span>
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主手机'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.mobile}

      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'户主地址'}
        {...this.formItemLayoutWithLabel}
      >
        <Paragraph ellipsis>
          {this.props.editRecord.address}
        </Paragraph>
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'水表编号'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.meter_number}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'用水性质'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.name}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'一阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_one_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'二阶水量'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_two_consumption}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'三阶价格'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.level_three_price}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'污水处理费'}
        {...this.formItemLayoutWithLabel}
      >
        {this.props.editRecord.price_nature.sewage_fee}
      </FormItem>
      <FormItem
        style={{width:'33%',display:'inline-block'}}
        label={'余额'}
        {...this.formItemLayoutWithLabel}
      >
        <span
          style={{padding:'5px'}}
          className={Number(this.props.editRecord.balance) > Number(this.props.editRecord.balance_alarm_amount) ? 'table-success table-status' :
            Number(this.props.editRecord.balance) > 0?'table-warm table-status':'table-error table-status'}>{this.props.editRecord.balance}</span>
      </FormItem>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="新水表号">
        <h2 style={{position:'relative',top:'-2px'}}>{this.state.meter_number}</h2>
      </Form.Item>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="转移到新表余额">
        <h2 style={{color:'#00b317',top:'-2px',position:'relative'}}>{this.state.balance}</h2>
      </Form.Item>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="此水表报废不再使用">
        <h2 style={{color:this.state.reuse==='1'?'#00b317':'#cb0000',top:'-2px',position:'relative'}}>{this.state.reuse==='1'?'重新使用':'不重新使用'}</h2>
      </Form.Item>
      <Form.Item    {...this.formItemLayoutWithLabel2}
                    label="备注">
        {this.state.remark}
      </Form.Item>
    </Form>
  }
  renderInfo3=()=>{
    return   <Result
      status="success"
      title="换表成功"
      subTitle={this.state.reuse==='1'?'旧表能继续使用':'旧表将不能继续使用'}
    />
  }
  render() {

    const steps = [
      {
        title: '填写换表信息',
        content: this.renderInfo(),
      },
      {
        title: '确认换表信息',
        content: this.renderInfo2()
      },
      {
        title: '成功',
        content: this.renderInfo3(),
      },
    ];
    const { current } = this.state;
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action" style={{textAlign:'center',marginTop:'10px'}}>

          {current === 0 && (
            <Button type="primary" onClick={() => {
              if(!Boolean(Number(this.state.meter_number))){
                message.error('请输入新水表号')
                return false
              }
              if(!Boolean(this.state.balance)){
                message.error('请输入新表余额')
                return false
              }
              this.next()
            }}>
              下一步
            </Button>
          )}
          {current === 1 && (
            <Fragment>
              <Button  onClick={() => this.prev()}>
                上一步
              </Button>
              <Button type="primary" style={{marginLeft:'10px'}} onClick={this.changeMeter}>
                提交
              </Button>
            </Fragment>

          )}
        </div>
      </div>
    );
  }
}

export default EditUserArchives;
